<template >
    <div>
        <p>这是obj对象的属性,当使用添加方法的时候这里会变化</p>
        {{ obj.name }} - {{ obj.age }}
    </div>
    <div>
        <p>这里是解构出来的name，age，失去了响应式 </p>
        {{ name }} -- {{ age }}
    </div>
    <div>
        <button @click="add">（ex8）点击我</button>
    </div>
</template>
<script>
/**
 * 简化reactive的对象使用
 *      会失去响应式
 *      因此通过toRefs可以保持响应式
 */
 
import { reactive, toRefs } from 'vue'; 
export default {
    setup(){
        //创建一个对象
        const obj = reactive({
            name:'omss',
            age:18
        })
        //创建一个方法
        const add = () => {
            obj.age++
        }
        //直接把name age 从obj中解构出来
        // const {name,age} = obj
        //使用toRefs方法，将obj对象中的name age 转换成响应式数据
        //const {name,age} = toRefs(obj)   //一般直接在返回的时候，写toRefs（）

        return {
            obj,
            // name,  //上面toRefs(obj)的时候这样返回 
            // age,
            add,
            ...toRefs(obj)
        }
    }
}
</script>
<style lang="">
    
</style>